<template>
    <p class="event-item" :style="{backgroundColor:this.event.color}" ref="titled" :class="cssClasses"
       @click="$emit('click', event, $event)">
        <slot :event="event" v-if="showTitle">
            Def: {{ event.title }}
        </slot>
    </p>
</template>

<script>
    import moment from 'moment'

    export default {
        props: ['event', 'date', 'firstDay','typesof'],
        mounted(){
            
            this.txt()
        },
        methods:{
            txt(){
                    if(this.typesof==0){
                        this.$refs.titled.style.whiteSpace="nowrap"
                        // this.$refs.titled.style.width=120
                        this.$refs.titled.style.overflow="hidden"
                       return this.$refs.titled.style.height=18
                    }else if(this.typesof==1){
                        this.$refs.titled.style.whiteSpace="pre-wrap"
                        this.$refs.titled.style.wordBreak="break-all"
                        // this.$refs.titled.style.backgroundColor=this.event.color
                       return this.$refs.titled.style.height=80
                    }else if(this.typesof==2){
                        this.$refs.titled.style.whiteSpace="pre-wrap"
                        this.$refs.titled.style.wordBreak="break-all"
                        // this.$refs.titled.style.backgroundColor=this.event.color
                       return this.$refs.titled.style.height=100
                    }
            }
        },
        computed: {
            cssClasses () {
                let cssClasses = this.event.cssClass;
                    
                if (!Array.isArray(cssClasses)) {
                    cssClasses = [cssClasses];
                } else {
                    cssClasses = Array.from(cssClasses);
                }

                if (this.start.isSame(this.date, 'day')) {
                    cssClasses.push('is-start');
                }

                if (this.end.isSame(this.date, 'day')) {
                    cssClasses.push('is-end');
                }

                if (! this.event.isShow) {
                    cssClasses.push('is-opacity');
                }

                return cssClasses.join(' ');
            },
            showTitle() {
                return (this.date.day() == this.firstDay || this.start.isSame(this.date, 'day'));
            },
            start () {
                return moment(this.event.start);
            },
            // end () {
            //     return moment(this.event.end);
            // },
            end () {
                return moment(this.event.start);
            }
        }
    }
</script>